<template>
  <div class="guanjia">
    <Header_h />
    <div class="sq_box_content">
      <div class="sekeeper_banner">
        <img src="@/assets/web/sekeeper.jpg" class="banner" alt="" />
        <div class="container">
          <div class="sekeeper_login">
            <div class="s_flex s_justify_content_between">
              <div>
                <h3 class="line_h_30 ft_weight_800 title_color sq_tilte1">
                  企业知识产权管理系统
                </h3>
                <p class="sq_content sq_content_color line_h_26">
                  专利管家已上线，快来体验吧！
                </p>
              </div>
              <div class="s_login">
                <el-tabs v-model="activeName">
                  <el-tab-pane label="数据管理">
                    <div>
                      <div class="login_items">
                        <el-input
                          prefix-icon="el-icon-date"
                          placeholder="请输入电话号码"
                          v-model="form.name"
                        ></el-input>
                      </div>
                      <div class="login_items">
                        <el-input
                          prefix-icon="el-icon-date"
                          placeholder="请选输入密码"
                          v-model="form.name"
                        ></el-input>
                      </div>
                      <div class="login_items">
                        <el-row type="flex" justify="space-between">
                          <el-col>
                            <el-checkbox
                              label="记住密码"
                              name="type"
                            ></el-checkbox>
                          </el-col>
                          <el-col style="text-align: right">
                            <span class="context wangji">忘记密码?</span>
                          </el-col>
                        </el-row>
                      </div>
                      <el-button
                        class="pubBtn"
                        style="width: 100%; margin: 30px 0; height: 44px"
                        type="button"
                        >登录</el-button
                      >
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="guanjia_h">
        <img src="@/assets/web/sekeeper2.png" alt="" />
        <div class="container">
          <div class="guanjia_h_info">
            <div
              class="
                s_flex
                s_flex-column
                s_justify_content_center
                s_align_items_center
                guanjia_h_info_box
              "
            >
              <h3
                class="sq_tilte_color line_h_30"
                style="color: #fff; font-size: 30px"
              >
                数据管理——托管方账号管理
              </h3>
              <p class="sq_content sq_content_color line_h_26">
                根据托管方要求，对委托服务企业进行专利数据统计，以发明专利公开、各类专利授权、全区发明总量等多个数据维度作为基础，实时对顺德区
                300
                家专利“重点企业”进行数据统计，并对相关统计数据进行趋势分析，及时掌握区内“重点企业”专利基本情况。为制定全区知识产权工作战略提供数据基础。
              </p>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="home_item home_item_bg">
          <img src="@/assets/web/sekeeper6.jpg" alt="" />
          <div class="container">
            <div
              class="
                home_box
                s_flex s_justify_content_between s_align_items_center
              "
            >
              <div class="home_info">
                <h3 class="line_h_30 ft_weight_800 title_color sq_tilte1">
                  可视化专利信息呈现，快速了解区 域技术情报
                </h3>
                <h4 class="sq_content sq_active line_h_26">进入平台 ></h4>
                <p class="sq_content sq_content_color line_h_26">
                  可视化的数据分析，简单快捷，分析研发策略的变化，预判未来市场，实时把握专利数据动向，让管理方快速了解辖区内企业的专利情报。
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="home_item home_item_bg">
          <div class="container">
            <div
              class="
                home_box
                s_flex s_justify_content_between s_align_items_center
              "
            >
              <div class="home_info home_info_right">
                <h3 class="line_h_30 ft_weight_800 title_color sq_tilte1">
                  全面企业专利数据管理，随时了解 企业动态
                </h3>
                <h4 class="sq_content sq_active line_h_26">进入平台 ></h4>
                <p class="sq_content sq_content_color line_h_26">
                  全面的企业专利数据管理，快速查找企业专利信息，自定义导出企业专利数据。为企业知识产权提供更精准指导及服务。
                </p>
              </div>
            </div>
          </div>
          <img src="@/assets/web/sekeeper7.jpg" alt="" />
        </div>
        <div class="home_item home_item_bg">
          <img src="@/assets/web/sekeeper8.jpg" alt="" />
          <div class="container">
            <div
              class="
                home_box
                s_flex s_justify_content_between s_align_items_center
              "
            >
              <div class="home_info">
                <h3 class="line_h_30 ft_weight_800 title_color sq_tilte1">
                  便捷的推送工具，及时推送专利情报
                </h3>
                <h4 class="sq_content sq_active line_h_26">进入平台 ></h4>
                <p class="sq_content sq_content_color line_h_26">
                  支持私信推送、按企业类型推送、全部推送等多种消息推送模式，直接推送到企业帐号、负责人邮箱，政策、动态、专利情报及时传递。
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Header_h from "@/components/Header_h";
import Footer from "@/components/Footer";
import rightMenu from "@/components/web/rightMenu";

export default {
  components: {
    Header_h,
    Footer,
  },
  data() {
    return {
      activeName: 0,
      form: {
        name: "",
      },
    };
  },
};
</script>

<style lang="less" scoped>
.sekeeper_banner {
  position: relative;
  .sekeeper_login {
    width: 1200px;
    position: absolute;
    top: 15%;
    p {
      margin-top: 20px;
    }
  }
  .banner {
    width: 100%;
  }
  .s_login {
    width: 461px;
    height: 518px;
    background: #ffffff;
    box-shadow: 0px 0px 21px 0px rgba(97, 97, 102, 0.23);
    border-radius: 10px;
    padding: 40px 50px;
  }
  .reg {
    color: #34bf92;
    text-align: center;
    cursor: pointer;
  }
  .wangji {
    color: #3478ff;
    cursor: pointer;
  }
  .login_items {
    margin-top: 30px;
  }
}
.guanjia_h {
  position: relative;
  .guanjia_h_info {
    position: absolute;
    top: 0;
    width: 1200px;
    height: 100%;
    .guanjia_h_info_box {
      height: 100%;
      div {
        margin-top: 50px;
        width: 115px;
        height: 36px;
        text-align: center;
        line-height: 36px;
        border: 1px solid #ffffff;
        color: #fff;
        cursor: pointer;
      }
      p {
        width: 587px;
        margin: 50px auto 0;
        color: #fff;
        text-align: center;
      }
    }
  }
}
.guanjia_t {
  //   padding: 20px 0;
  position: relative;
  margin-top: -4%;
  z-index: 2;
  margin-bottom: 80px;
  .guanjia_t_box {
    background: #fff;
    box-shadow: 0 0 16px rgba(24, 76, 171, 0.16);
    border-radius: 5px;
  }
}
.guanjia_item {
  width: 30%;
  text-align: left;
  margin: 40px 0;
  .icon {
    width: 60px;
    height: 60px;
  }
  h4 {
    margin: 10px auto;
  }
  p {
    width: 150px;
  }
}
.line_h {
  width: 90%;
  margin: 0 auto;
  height: 1px;
  border: 1px solid #e1e7ff;
}

.home_item {
  // padding:80px 0 0;
  position: relative;
  img {
    width: 100%;
  }
}
.home_item_bg {
  background: #f2f6ff;
}
.home_box {
  .home_info {
    // width: 25%;
    position: absolute;
    top: 40%;
    z-index: 1;
    p {
      margin: 30px 0 40px;
      width: 450px;
    }
    h3 {
      line-height: 50px;
      width: 465px;
    }
    h4 {
      margin-top: 10px;
    }
  }
  .home_right {
    width: 70%;
    overflow: hidden;
    // padding: 30px;
    img {
      width: 100%;
      transition: all 0.5s ease;
      //   padding: 30px;
      &:hover {
        // transform: scale(1.1);
      }
    }
  }
  .home_right2 {
    width: 70%;
    overflow: hidden;
    img {
      width: 100%;
      transition: all 0.5s ease;
      //   padding: 30px;

      &:hover {
        // transform: scale(1.1);
      }
    }
  }
  .home_right3 {
    width: 70%;
    overflow: hidden;
    img {
      width: 100%;
      transition: all 0.5s ease;
      &:hover {
        // transform: scale(1.1);
      }
    }
  }
  .home_info_w {
    width: 29%;
  }
}
.guanjia_item_m {
  width: 50%;
  margin: 0 auto;
}
.home_info_right {
  right: 15%;
}
@media (max-width: 1360px) {
  .home_info_right {
    right: 4%;
  }
}
@media (max-width: 1440px) {
  .home_info_right {
    right: 6%;
  }
}
</style>